<script setup>
import { ref, onMounted } from 'vue';
import { ArticlePage, article, articleinfo, deleteArticle } from '@/utils/api';
import { ElMessage, ElMessageBox } from 'element-plus';

// 复制 B
import useClipboard from 'vue-clipboard3'

const { toClipboard } = useClipboard()
// 复制 E

// 文章 B
import cwz from '@/components/customwz.vue'
// 文章 E

let areaId = null;
const list = ref([]);
const iswz = ref(false);
const articleObj = ref({});
const pageNum = ref(1);
const currentPage = ref(1);
const totalElements = ref(0);
const getArticlePage = async () => {
    let params = {
        type: '园区动态',
        areaId: areaId,
        pageSize: 10,
        pageNum: pageNum.value
    }
    let res = await ArticlePage(params)
    if (res.code == '200') {
        list.value = res.data.content;
        totalElements.value = res.data.totalElements;
    }
}

const handleSizeChange = (val) => {
    pageNum.value = val;
    getArticlePage();
};


const fabu = async (data, type) => {
    let params = data.id + '&type=' + type;
    let res = await article(params)
    if (res.code == '200') {
        if (type == 0) {
            ElMessage({
                message: '发布成功',
                type: 'success',
            })
        } else {
            ElMessage({
                message: '取消发布',
                type: 'success',
            })
        }
        getArticlePage();
    } else {
        ElMessage({
            message: res.message,
            type: 'warning',
        })
    }

};
const add = () => {
    articleObj.value['id'] = guid();
    articleObj.value['areaId'] = areaId;
    articleObj.value['coverPicture'] = '';
    articleObj.value['content'] = '';
    articleObj.value['title'] = '';
    articleObj.value['author'] = '';
    articleObj.value['digest'] = '';
    iswz.value = true;
};
const guid = () => {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        let r = Math.random() * 32 | 0,
            v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(32);
    });
};
const gobj = async (data) => {
    let res = await articleinfo(data.id)
    if (res.code == '200') {
        iswz.value = true;
        articleObj.value = Object.assign({}, res.data);

    } else {
        ElMessage({
            message: res.message,
            type: 'warning',
        })
    }
};

const delitem = (data) => {
    ElMessageBox.confirm(
        '是否永久删除该文件。继续吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deleteArticle(data.id).then(res => {
                if (res.code == '200') {
                    getArticlePage();
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.message,
                    })
                }
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}

const uploadwz = () => {
    getArticlePage();
    articleObj.value = {};
    iswz.value = false;
}
onMounted(() => {
    areaId = window.sessionStorage.getItem('areaId');
    getArticlePage();
})

</script>
<template>
    <div class="wls-aut">
        <div class="wls-aut-title" style="justify-content: space-between;">
            <div style="font-weight: 700;"><span>园区动态</span></div>
        </div>
        <div class="wls-aut-container" style="padding: .24rem;">
            <el-row>
                <el-col :span="24" style="text-align: right;">
                    <el-button type="primary" @click.stop="add">新增动态</el-button>
                </el-col>
            </el-row>
            <div style="height: 16px;"></div>
            <table>
                <thead>
                    <th>标题</th>
                    <th>发布作者</th>
                    <th>封面图片</th>
                    <th>发布时间</th>
                    <th>操作</th>
                </thead>
                <tbody>
                    <tr v-for="(i, x) in list" :key="x">
                        <td :title="i.title">{{ i.title }}</td>
                        <td>{{ i.author }}</td>
                        <td style="display: flex;justify-content: center;align-items: center;">
                            <el-image style="width: 80px;height: 100%;" :src="i.coverPicture"
                                :preview-src-list="[i.coverPicture]"></el-image>
                        </td>
                        <td>{{ i.date }}</td>
                        <td>
                            <span style="margin-left: .1rem;" class="green" @click="gobj(i)">编辑</span>
                            <span style="margin-left: .1rem;" class="blue" v-if="i.status == 0"
                                @click="fabu(i, 0)">发布</span>
                            <span style="margin-left: .1rem;" class="blue" v-if="i.status == 1"
                                @click="fabu(i, 1)">取消发布</span>
                            <span style="margin-left: .1rem;" class="red" @click="delitem(i)">删除</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <el-pagination v-model:current-page="currentPage" :page-size="10" :pager-count="5" :small="true"
            :disabled="false" background layout="total, prev, pager, next, jumper" :total="totalElements"
            @current-change="handleSizeChange" />

        <cwz :msg="articleObj" v-if="iswz" @closeo="uploadwz" />
    </div>
</template>
<style scoped>
.green {
    text-decoration-line: underline;
    color: #01C144;
    cursor: pointer;
}

.blue {
    text-decoration-line: underline;
    color: #007CEF;
    cursor: pointer;
}

.red {
    text-decoration-line: underline;
    color: #FF0000;
    cursor: pointer;
}
</style>
